import React from 'react';
export default function ProgressBar(props) {
  const [state, setState] = React.useState({ hidden: true, p: 0 });
  React.useEffect(() => {
    if (props.status === '') {
    } else if (props.status === 'start') {
      setState((state) => ({ ...state, hidden: false, p: 25 }));
    } else {
      if ((state.p = 25)) {
        setState((state) => ({ ...state, p: 100 }));
        setTimeout(() => {
          setState({ p: 0, hidden: true });
        }, 500);
      }
    }
  }, [props.status]);
  // console.log("-----ProcessBar------")
  console.log(props)
  return (
    <div className="progress-bar-container">
      <div
        hidden={state.hidden}
        className={'progress-bar ' + 'p' + state.p}
      ></div>
    </div>
  );
}
